<template>
    <view class="physique">
        <view class="physique-title">请选择符合你身体特征的选项，我们将根据您的身体情况给出相应的报告</view>

        <view class="physique-main">
            <view class="physique-title1">
                <text></text>
                身体外形特征1<label class="labelTxt">（4选1）</label>
            </view>
            <view class="physique-type">
                <block v-for="(item, index) in configList[0]" :key="index">
                    <view
                        :class="{ on: checkedArrey.indexOf(item.id) != -1 }"
                        @click="appointment1(item.id, item.name)"
                        >{{ item.name }}</view
                    >
                </block>
            </view>
            <view class="gap"></view>
            <view class="physique-title1">
                <text></text>
                身体外形特征2<label class="labelTxt">（最少选择一项）</label>
            </view>
            <view class="physique-type">
                <block v-for="(item, index) in configList[1]" :key="index">
                    <view
                        :class="{ on: checkedArrey1.indexOf(item.id) != -1 }"
                        @click="appointment2(item.id, item.name)"
                        >{{ item.name }}</view
                    >
                </block>
            </view>
            <view class="gap"></view>
            <view class="physique-title1">
                <text></text>
                病例历史<label class="labelTxt">（非必选）</label>
            </view>
            <view class="physique-type">
                <block v-for="(item, index) in configList[2]" :key="index">
                    <view
                        :class="{ on: checkedArrey2.indexOf(item.id) != -1 }"
                        @click="appointment3(item.id, item.name)"
                        >{{ item.name }}</view
                    >
                </block>
            </view>
            <view class="gap"></view>
            <view class="physique-title1">
                <text></text>
                身体内在表现<label class="labelTxt">（（最少选择一项））</label>
            </view>
            <view class="physique-type1">
                <block v-for="(item, index) in configList[3]" :key="index">
                    <view :class="{ on: checkedArrey3.indexOf(item.id) != -1 }" @click="appointment4(item.id)">{{
                        item.name
                    }}</view>
                </block>
            </view>
        </view>
        <view style="height: 240rpx; width: 100; background-color: #fff"></view>
        <view class="footer"><view class="footer-item" @click="submit">提交</view></view>
        <u-toast ref="uToast" />
    </view>
</template>

<script>
import utils from "@/common/utils.js";
export default {
    data() {
        return {
            // tag:['上身偏瘦，下身偏胖','上身偏胖，下身偏瘦','无明显上下身偏胖/瘦','腰两侧肉多胯宽','肚子大','胳膊、腿粗壮'],
            // tag1:['月经量少/推迟','容易便秘','不爱运动','消化不良','有乳腺结节/增生','容易累','上身热下肢凉','早餐不规律/不吃'],
            checkedArrey: [],
            checkedArrey1: [],
            checkedArrey2: [],
            checkedArrey3: [],
            configList: [],
            shapeID: "",
            evaluationResult: "",
            tag: "",
            solution: "",
            selectTitle: [],
        };
    },
    onShow() {
        this.checkedArrey = [];
        this.checkedArrey1 = [];
    },
    onLoad(options) {
        this.getconfigList();
        this.shapeID = options.id;
    },

    methods: {
        getconfigList() {
            this.request.httpTokenJsonRequest("/mp-api/wx/shape/configList", null, "POST", true).then((res) => {
                if (res.code != 0) {
                    this.helper.showToast(res.message);
                    return;
                }
                res.data[0] &&
                    res.data[0].length &&
                    res.data[0].map((item) => {
                        if (item.shape === "A型") {
                        } else if (item.shape === "V型") {
                        } else if (item.shape === "H型") {
                        }
                    });

                this.configList = res.data;
            });
        },
        submit: utils.throttle.call(
            this,
            function () {
                let data = {
                    // evaluationResult: this.evaluationResult,
                    // externals: this.checkedArrey,
                    // id: this.shapeID || "",
                    // inherents: this.checkedArrey1,
                    // solution: this.solution,
                    featureIds: this.checkedArrey.concat(this.checkedArrey1, this.checkedArrey2, this.checkedArrey3),
                };

                if (this.checkedArrey.length == 0) {
                    this.helper.showToast("请选择身体外形特征1");
                    return;
                }
                if (this.checkedArrey1.length == 0) {
                    this.helper.showToast("请选择身体外形特征2");
                    return;
                }
                if (this.checkedArrey3.length == 0) {
                    this.helper.showToast("请选择身体内在表现");
                    return;
                }
                // if (this.checkedArrey.length == 0) {
                //     this.helper.showToast("请选择身体外形特征");
                //     return;
                // }
                // if (
                //     this.checkedArrey.indexOf(1) == -1 &&
                //     this.checkedArrey.indexOf(8) == -1 &&
                //     this.checkedArrey.indexOf(9) == -1
                // ) {
                //     // this.helper.showToast('请选择‘上身偏瘦，下身偏胖；上身偏胖，下身偏瘦 ；无明显上下身偏胖/瘦’其中一项');
                //     this.$u.toast("请选择‘上身偏瘦，下身偏胖；上身偏胖，下身偏瘦 ；无明显上下身偏胖/瘦’其中一项");

                //     return;
                // }
                // if (this.checkedArrey1.length == 0) {
                //     this.helper.showToast("请选择身体内在表现");
                //     return;
                // }
                // if (this.checkedArrey.length + this.checkedArrey1.length > 4) {
                //     this.helper.showToast("最多选择4项");
                //     return;
                // }
                this.request.httpTokenJsonRequest("/mp-api/wx/shape/evaluation", data, "POST", true).then((res) => {
                    if (res.code != 0) {
                        this.helper.showToast(res.message);
                        return;
                    }
                    let evaluation = res.data;
                    this.helper.showToast("提交成功");
                    setTimeout(function () {
                        uni.redirectTo({
                            url:
                                "./detail?evaluationResult=" +
                                evaluation.evaluationResult +
                                "&solution=" +
                                evaluation.solution +
                                "&id=" +
                                evaluation.id,
                        });
                    }, 1000);
                });
            },
            3000,
        ),

        appointment1(index, title) {
            let that = this;
            if (that.checkedArrey.indexOf(index) == -1) {
                if (index == 1 || index == 8 || index == 9 || index == 23) {
                    if (
                        that.checkedArrey.indexOf(1) >= 0 ||
                        that.checkedArrey.indexOf(8) >= 0 ||
                        that.checkedArrey.indexOf(9) >= 0 ||
                        that.checkedArrey.indexOf(23) >= 0
                    ) {
                        this.helper.showToast("身体外形特征1必须且仅可选择一个");
                        return;
                    }
                }

                that.checkedArrey.push(index);
            } else if ((that.checkedArrey.indexOf(index), 1)) {
                that.checkedArrey.splice(that.checkedArrey.indexOf(index), 1);
            }
        },
        appointment2(index, title) {
            let that = this;
            if (that.checkedArrey1.indexOf(index) == -1) {
                that.checkedArrey1.push(index);
            } else if ((that.checkedArrey1.indexOf(index), 1)) {
                that.checkedArrey1.splice(that.checkedArrey1.indexOf(index), 1);
            }
        },
        appointment3(index, title) {
            let that = this;
            if (that.checkedArrey2.indexOf(index) == -1) {
                that.checkedArrey2.push(index);
            } else if ((that.checkedArrey2.indexOf(index), 1)) {
                that.checkedArrey2.splice(that.checkedArrey2.indexOf(index), 1);
            }
        },
        appointment4(index) {
            let that = this;
            if (that.checkedArrey3.indexOf(index) == -1) {
                that.checkedArrey3.push(index); //选中添加到数组里
            } else if ((that.checkedArrey3.indexOf(index), 1)) {
                that.checkedArrey3.splice(that.checkedArrey3.indexOf(index), 1);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
body,
.physique {
    height: 100%;
}
uni-page-body,
html {
    height: 100%;
}
.physique-main {
    background-color: #ffffff;
}
.physique-type1 {
    padding-bottom: 80px;
    background-color: #ffffff;
    width: 100%;
    padding-left: 4%;
    padding-right: 4%;
}
.labelTxt {
    font-size: 14px;
    color: #999999;
}
</style>
